<template>
    <div class="switch-root" @click.stop="switch_ClickEvent"
        :style="'background:' + (_switch ? '#79bbff' : '#909399') + ';'">
        <div class="switch-content">
            <div class="switch-case1 case" :style="'width:' + (_switch ? 'calc(50% - 30px)' : '1px') + ';'">{{
                props.case[0]
            }}</div>
            <div class="switch-but"></div>
            <div class="switch-case2 case">{{ props.case[1] }}</div>
        </div>
    </div>
</template>

<script setup>
import { defineProps } from "vue";
const props = defineProps({
    case: Array,
    default: Boolean,
    change: '',
});
// const props = {
//     case: ['1', '2'],
//     default: false,
// }
const emits = defineEmits(['change']);

const _switch = ref(props.default);

const switch_ClickEvent = () => {
    _switch.value = !_switch.value;
    emits('change', _switch.value);
    console.log()
    if (props.change) {
        props.change(_switch.value);
    }
}

const set = (value) => {
    _switch.value = value;
}

defineExpose({
    set,
})

</script>

<style lang="scss" scoped>
.switch-root {
    width: calc(100% - 6px);
    height: 30px;
    // background: red;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(128, 128, 128, 1);
    box-shadow: 0 0 10px -3px rgba(128, 128, 128, 1);
    transition-duration: 0.3s;

    .switch-content {
        width: 200%;
        display: flex;
        align-items: center;

        .switch-but {
            height: calc(30px - 4px);
            width: calc(30px - 4px);
            border-radius: 30px;
            border: 1px solid rgba(128, 128, 128, 1);
            box-shadow: 0 0 10px -3px rgba(128, 128, 128, 1), inset 0 0 10px -5px rgba(128, 128, 128, 1);
            background: white;
        }

        .case {
            width: calc(50% - 30px);
            height: 100%;
            line-height: 30px;
            text-align: center;
            transition-duration: 0.3s;
            color: white;
            font-weight: 900;
            white-space: nowrap;
        }

        .switch-case1 {
            width: 1px;
            overflow: hidden;
        }

        .switch-case2 {}
    }

}
</style>